<template>
  <div
    ref="threeBox"
    v-loading="loadModel"
    class="flex column module-inner"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    element-loading-spinner="el-icon-loading"
    element-loading-text="模型渲染中"
  >
    <div class="module-title">
      <img alt="" src="/image/download-5.png">
      {{ baseLocation }}基地分布
    </div>
    <div ref="china" class="china-chart content common-module-bg"/>
  </div>

</template>
<script>
import threeUtils from "@/utils/threeMoudle";

const three = new threeUtils()
export default {
  name: 'DomesticBase',
  components: {},
  props: {
    moduleData: {
      type: Array,
      default: () => []
    },
    geoUrl: {
      type: String,
      default: "@/utils/china.json"
    },
    baseLocation: {
      type: String,
      default: '国内'
    }
  },
  data() {
    return {
      loadModel: false,
      charts: null,
    }
  },
  watch: {
    'moduleData.length'(newVal) {
      if (newVal) {
        three.pointHandler(this.moduleData)
      }
    }
  },
  beforeDestroy() {
    three.destroy()
  },
  mounted() {
    this.charts = {
      resize:()=> three.onWindowResize.call(three,this.moduleData)
    }
    three.init(this.$refs.china, "https://ams.jsjsem.cn/map/china",)
    // three.pointHandler(this.moduleData)
  }
}
</script>
<style lang="scss" scoped>
@import "src/styles/conversion.scss";

.module-inner {
  height: 100%;
}

.content {
  flex: 230;
  position: relative;
  overflow: hidden;
}
</style>
